<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, user-scalable=0, minimal-ui" charset="UTF-8">
    <title></title>
    <script src="js/jquery-3.2.1.min.js"></script>
    <script src="js/serverUrl.js"></script>
    <link rel="stylesheet" href="css/news.css" />
</head>
<style>
		u {
			width: 15px;
		}
		.choosed {
			background: lightblue;
			color: white;
			display: flex;
			justify-content: center;
			align-items: center;
			margin-top: 30px;
			line-height:40px;
			font-size: 20px;
			margin-left: 15px;
			margin-right: 15px;
			border-radius: 20px;
		}
		.question{
			margin: 15px;
			font-family: KaiTi;
			line-height:30px;
			font-size: 20px;
		}
		.answer{
			margin-left: 15px;
			margin-right: 15px;
			font-family: KaiTi;
			margin-top: 15px;
			line-height:30px;
			font-size: 20px;
		}
		.answer-bg{
			border: 1px #9e9e9e solid;
			padding: 5px 5px 5px 15px;
			border-radius: 4px;
			background: #fafafa;

		}

		.answer-choose{
			border: 1px #4caf50 solid;
			padding: 5px 5px 5px 15px;
			border-radius: 4px;
			background: #e8f5e9;

		}

		.questionTitle{
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			background: lightgray;
			padding-top: 5px;
			padding-bottom: 5px;
		}

		.title{
			margin-left: 10px;
			margin-right: 10px;
		}

		.trueAnswer{
			margin: 15px;
			font-family: simhei;
			line-height:30px;
			font-size: 20px;

		}
		.answer-bg{
			border: 1px #9e9e9e solid;
			padding: 5px 5px 5px 15px;
			border-radius: 4px;
			background: #fafafa;
			color: #616161;

		}

		.answer-true{
			border: 1px #4caf50 solid;
			padding: 5px 5px 5px 15px;
			border-radius: 4px;
			background: #e8f5e9;
			color: #388E3C;
		}


		.answer-false{
			border: 1px #e51c23 solid;
			padding: 5px 5px 5px 15px;
			border-radius: 4px;
			background: #fed0dc;
			color: #c41411;
		}
	</style>
<script type="text/javascript">

		$(document).ready(function (){
			$('#choosed').hide();
		})

		var index = 0;
		var paperData = {};
		var question = {}
		var totalCount = 0

		var choosed = ""

		function loadPaper(questionString){
			question = questionString
		}
		function loadTotal(total) {
			totalCount = total
			$("#total").html(total)
		}
		function pre() {
			if(index == 0){
                let params = {
                    errorMessage: '已经是第一题了'
                }
				 WebViewJavascriptBridge.callHandler('indexError',params,function(response) {
                                       
                   });
				return
			}
             index--;
             loadQuestion(index)
             let params1 = {
                 index: index
             }
			WebViewJavascriptBridge.callHandler('changeIndex',params1,function(response) {
                                
            });
           
			
		}

		function next() {
			if(index == totalCount-1){
				let params = {
                    errorMessage: '已经是最后题了'
                }
                 WebViewJavascriptBridge.callHandler('indexError',params,function(response) {
                                       
                   });
                 return
			}
            index++;
            loadQuestion(index)
            let params1 = {
                index: index
            }
            WebViewJavascriptBridge.callHandler('changeIndex',params1,function(response) {
                                
            });
		
		}

		function answerClick(i){

			var answerId = "#answer_"+i
			var answer = question.answerList[i]
			if(answer.selected == true){
				answer.selected = false

				$(answerId).css('color',"#616161")
				$(answerId).addClass("answer-bg")
				$(answerId).removeClass("answer-choose")

			}else {
				answer.selected = true
				$(answerId).css('color',"#388E3C")
				$(answerId).removeClass("answer-bg")
				$(answerId).addClass("answer-choose")
			}
		}

		function loadQuestion(questionIndex){
			index = questionIndex
			var tx = ""
			switch(question.questionType) {
				case 1:
					tx = '判断题'
					break
				case 2:
					tx = '单选题'
					break
				case 3:
					tx = '多选题'
					break
				case 4:
					tx = '计算题'
					break
				case 5:
					tx = '填空题'
					break
				case 6:
					tx = '问答题'
					break
				case 7:
					tx = '技能题'
					break
				case 8:
					tx = '简答题'
					break
				case 9:
					tx = '名词解释'
					break
				case 10:
					tx = '绘图题'
					break
				case 11:
					tx = '论述题'
					break
				case 12:
					tx = '案例分析'
					break
				case 13:
					tx = '综合题'
					break
				case 14:
					tx = '识图题'
					break
				case 15:
					tx = '选答题'
					break
				case 16:
					tx = '改错题'
					break
				case 17:
					tx = '操作题'
					break
				default:
					tx = ''
					break
			}
			$('#titleName').html(tx)
			$("#trueAnswer").html("")
			$("#userAnswer").html("")
			$("#selection").html("")
			choosed = ""
			$("#index").html(questionIndex+1)
			$("#question").html(question.questionContent)

            if(question.questionType == 3) {
				$('#choosed').show();
			}else {
				$('#choosed').hide();
			}

			if (question.questionType == 1 ){
				var panduanHtml = "<div style='color:#616161' id='trueChooseAnswer' onclick='trueClick()'  class='answer answer-bg' >"+"正确</div>"
				panduanHtml += "<div style='color:#616161' id='falseChooseAnswer' onclick='falseClick()' class='answer answer-bg' >"+"错误</div>"
				$("#selection").html(panduanHtml)

			} else if (question.questionType ==2 || question.questionType == 3){
				var answerList = question.answerList
				var size = answerList.length
				var answerHtml = ""
				for(var i = 0;i<size;i++){
					var answer = answerList[i]
					var color = "#616161"
					var bgClass = "answer-choose"
					if(answer.selected == true){
						color = "#388E3C"
						bgClass = "answer-choose"
					}else {
						color = "#616161"
						bgClass = "answer-bg"
					}
					answerHtml+="<div style='color:"+color+"' id='answer_"+i+"' class='answer "+bgClass+"' onclick=answerClick("+i+")>"+answer.optionName+"、"+answer.answerContent+"</div>"

				}
				$("#selection").html(answerHtml)
			}else {
				$("#selection").html("")
			}

		}

		function answerClick(i){
			if (question.questionType ==2 ){
				var answer = question.answerList[i]
				if(answer.optionName == question.solution){
					next()
				}else {
					var answerList = question.answerList
					var size = answerList.length
					var answerHtml = ""
					for(var i = 0;i<size;i++){
						var answerInfo = answerList[i]
						var bgClass = "answer-bg"
						if(answerInfo.optionName ==answer.optionName ){
							bgClass = "answer-false"
						}

						if(answerInfo.optionName ==question.solution ){
							bgClass = "answer-true"
						}

						answerHtml+="<div class='answer "+bgClass+"' >"+answerInfo.optionName+"、"+answerInfo.answerContent+"</div>"

					}
					$("#selection").html(answerHtml)
					$("#trueAnswer").html("正确答案："+question.solution)
					$("#userAnswer").html("您的答案："+answer.optionName)
				}
			}else if(question.questionType == 3){
				var answerId = "#answer_"+i
				var answer = question.answerList[i]
				if(answer.selected == true){
					answer.selected = false

					$(answerId).css('color',"#616161")
					$(answerId).addClass("answer-bg")
					$(answerId).removeClass("answer-choose")

				}else {
					answer.selected = true
					$(answerId).css('color',"#388E3C")
					$(answerId).removeClass("answer-bg")
					$(answerId).addClass("answer-choose")
				}
				}
		}

		function comfirm() {
			choosed = ""
			var answerList = question.answerList
			var size = answerList.length
			for(var i = 0;i<size;i++){
				if(answerList[i].selected == true){
					choosed += answerList[i].optionName
				}
			}
			if(choosed == question.solution){
				next()
			}else {
				var answerHtml =""
				for(var j = 0;j<size;j++){
				var answerInfo = answerList[j]
				var bgClass = "answer-bg"
				if(question.solution.indexOf(answerInfo.optionName)>=0
					&&choosed.indexOf(answerInfo.optionName)>=0){
						bgClass = "answer-true"
				}
				if(question.solution.indexOf(answerInfo.optionName)>=0
					&&choosed.indexOf(answerInfo.optionName)<0){
						bgClass = "answer-true"
				}
				if(question.solution.indexOf(answerInfo.optionName)<0
					&&choosed.indexOf(answerInfo.optionName)>=0){
						bgClass = "answer-false"
				}
				answerHtml+="<div id='answer_"+i+"' class='answer "+bgClass+"'>"+answerInfo.optionName+"、"+answerInfo.answerContent+"</div>"
				$("#selection").html(answerHtml)
				$("#trueAnswer").html("正确答案："+question.solution)
				$("#userAnswer").html("您的答案："+choosed)
			}
			}
		}

		function trueClick() {
			if(question.solution == 'T') {
				next()
			}else {
				var panduanHtml = "<div  class='answer answer-false' >"+"正确</div>"
				panduanHtml += "<div   class='answer answer-true' >"+"错误</div>"
				$("#selection").html(panduanHtml)
				$("#trueAnswer").html("正确答案：错误")
				$("#userAnswer").html("您的答案：正确")
			}
		}

		function falseClick() {
			if(question.solution == 'F') {
				next()
			}else {
				var panduanHtml = "<div  class='answer answer-true' >"+"正确</div>"
				panduanHtml += "<div  class='answer answer-false' >"+"错误</div>"
				$("#selection").html(panduanHtml)
				$("#trueAnswer").html("正确答案：正确")
				$("#userAnswer").html("您的答案：错误")
			}
		}



		function showAnswer(){
			if (question.questionType ==1){
				var answer = ""
				if(question.solution == 'T') {
					answer = "正确"
				}else {
					answer = "错误"
				}
				$("#trueAnswer").html("正确答案："+answer)
            }else if (question.questionType ==2 || question.questionType == 3){
				$("#trueAnswer").html("正确答案："+question.solution)
			}else {
				$("#trueAnswer").html("正确答案："+question.answerList[0].answerContent)
			}

		}

        function hidenAnswer(){
			$("#trueAnswer").html("")
		}
	</script>
<body>
<div class="questionTitle">
    <div class="title" id="titleName"></div>
    <div class="title">第 <span id="index"></span> 题/共 <span id="total"></span> 题</div>
</div>

<div class="question" id="question">
</div>

<div class="selection" id="selection">
</div>

<div class="choosed" id="choosed" onclick="comfirm()">确认答案</div>

<div class="trueAnswer" id="trueAnswer">
</div>

<div class="trueAnswer" id="userAnswer">
</div>
</body>
</html>
